<template>
	<view>
		<view class="bigbox">

			<view class="sousuo">
				<img src="../../static/搜索(2).png" alt=""
					style="width: 20px; height: 20px; margin-top: 7px; margin-left: 10px;">
				<input type="text" class="text" value="" placeholder="请输入关键词进行搜索" v-model="search" :value="search"
					@input="messagesearch">
			</view>
			<button class="an" @click="sou()">搜索</button>
		</view>

		<view class="shangping-f">

			<view class="shangping" v-for="(item,index) in list" @click="goDetail(index)">
				<img class="img" :src="item.mainPic" alt="">
				<view class="text">
					{{item.dtitle}}
				</view>
				<view class="rmb">
					¥{{item.actualPrice}}
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import gbroMarquee from '@/components/gbro-marquee/marquee.vue'
	export default {
		components: {},
		data() {
			return {
				ss: '',
				name: '',
				list: [],
				num:10
			}
		},
		onLoad(option) {
			let that = this
			console.log(option.name);
			that.name = option.name
			uni.request({
				url: "https://openapiv2.dataoke.com/open-api/goods/list-super-goods",
				data: {
					pageId: 1,
					pageSize: 100,
					keyWords: that.name,
					sort: 0,
					type: 0,
					appkey: "622b674f76e31"
				},
				success(res) {
					that.list = res.data.data.list
					console.log(that.list)
				},
			})
		},
		onReachBottom() {
			// 触底函数
			this.num = this.num + 10
			uni.request({ //推荐商品
				url: "https://openapiv2.dataoke.com/open-api/goods/list-super-goods?",
				data: {
					pageId: 1,
					pageSize: this.num,
					keyWords: this.name,
					sort: 0,
					type: 0,
					appkey: "622b674f76e31"
				},
				success: (res) => {
					this.list = res.data.data.list
					// this.sp = this.sp.concat(res.data.data.list.slice(this.goodsnum - 8))

					// this.goodsnum = this.goodsnum + 8
					console.log(this.num)
					console.log(res.data.data);

				}
			})
		},
		methods: {
			messagesearch: function(event) {
				console.log(event.target.value)
				this.name = event.target.value
				console.log(this.name);
			},
			sou() {
				let that = this
				uni.request({
					url: "https://openapiv2.dataoke.com/open-api/goods/list-super-goods?pageId=1&pageSize=100&keyWords=" +
						this.name + "&sort=0&type=0&appkey=622b674f76e31",
					success(res) {
						that.list = res.data.data.list
						that.list = that.list.slice(0, 10)
						console.log(res.data.data.list)
					}
				})
			},
			goDetail(index) {
				uni.navigateTo({
					// url: './goumai2?'+"id="+this.list[index].id
					url: './goumai2?' + "name=" + this.name + "&id=" + this.list[index].id
				});
			},
		}
	}
</script>

<style lang="scss">
	.bigbox {
		background-color: #f1f1f2;
		height: 60px;
		margin-top: 0px;
		// align-items: center;
		display: flex;

		.an {
			margin-top: 10px;
			height: 35px;
			font-size: 15px;
			background-color: red;
			color: white;
		}

		.sousuo {

			margin: 10px 0px 10px 10px;
			width: 75%;
			height: 35px;
			display: flex;
			background-color: #ffffff;
			border-radius: 13px;

			.text {
				margin-top: 5px;
				color: #b6b6b6;
				margin-left: 5px;
			}
		}
	}

	.shangping-f {
		display: flex;
		flex-wrap: wrap;
		// border: 1px solid red; 
		margin-top: 30px;
		background-color: #efefef;

	}

	.shangping {
		border-radius: 15px;
		width: 180px;
		// border: 1px solid #707070;
		background-color: #ffffff;
		margin-top: 10px;
		margin-left: 4px;

		.img {
			width: 180px;
			border-radius: 15px;
		}

		.text {
			width: 180px;
			background-color: #ffffff;
		}

		.rmb {
			font-size: 25px;
			color: #fa2209;
		}
	}
</style>
